<template>
  <a-card
    class="mb-8 shadow-card"
    :body-style="{ padding: '24px 32px', borderRadius: '8px' }"
    bordered="false"
  >
    <!-- 空白盒子保留安全距离 -->
    <div style="height: 80px;"></div>

    <a-row :gutter="24" justify="center" align="middle">
      <a-col :span="24" :md="24" style="text-align: center;">
        <h2 class="text-2xl md:text-3xl font-bold text-neutral-900 mb-1">{{ teamDetails.teamName }}</h2>
        <p class="text-neutral-900 mb-4">{{ teamDetails.description }}</p>
        <p class="text-neutral-600 mb-4">已有{{ teamDetails.maxCount }}人订阅</p>
        <div class="flex justify-center md:justify-end space-x-4">
          <a-button shape="round" type="primary" @click="showSubscribeModal = true">
            <template #icon>
              <MessageOutlined />
            </template>
            订阅
          </a-button>
<!--          <a-button shape="round" type="default" @click="unsubscribe">-->
<!--            <template #icon>-->
<!--              <DeleteOutlined />-->
<!--            </template>-->
<!--            取消订阅-->
<!--          </a-button>-->
        </div>
      </a-col>
    </a-row>
  </a-card>

  <SubscribeModal
    v-if="showSubscribeModal"
  :visible="showSubscribeModal"
  :teamInfo="teamStore.teamDetails"
  @update:visible="(visible) => showSubscribeModal = visible"
  @onSubscribe="handleSubscribeSuccess"
  />
</template>


<script setup lang="ts">
import { message } from 'ant-design-vue'
import {
  MessageOutlined
} from '@ant-design/icons-vue'
import { ref,onMounted } from 'vue'//TODO 获取人数

import { useTeamStore } from '@/stores/teamStore'
import { storeToRefs } from 'pinia'
const teamStore = useTeamStore()
const { teamDetails } = storeToRefs(teamStore)

import{getTeamMembers} from "@/api/sysTeamController"
import SubscribeModal from '../TeamSubscribe/SubscribeModal.vue'

const teamNumber = ref(0)

onMounted(() => {
  // 获取战队成员数量 TODO: 这里可以优化为使用状态机
  getTeamMembers({ teamId: 3 }).then(res => {
    if (res?.data?.code === 0) {
      teamNumber.value = res.data.data.length
    } else {
      message.error(res?.data?.message || '获取战队成员失败')
    }
  })
})

// 控制弹窗显示
const showSubscribeModal = ref(false);

// 订阅成功回调
const handleSubscribeSuccess = (result) => {
  console.log('订阅成功', result);
  // 这里可以添加订阅成功后的逻辑（如刷新页面、跳转页面等）
};
</script>
<style scoped>
.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shadow-card {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
}

.text-primary {
  color: #FF424D;
}

.text-neutral-500 {
  color: #6B7280;
}

.text-neutral-600 {
  color: #4B5563;
}

.text-neutral-900 {
  color: #111827;
}

.bg-neutral-50 {
  background-color: #F9FAFB;
}
</style>
